import styled from 'styled-components';
import { Button, Input, Form, message } from 'antd';
import { CSSProperties, useEffect, useRef, useState } from 'react';

import MarkdownPreview from '@uiw/react-markdown-preview';

const { TextArea } = Input;

export const MarkdownView = (props: {
    style?: CSSProperties;
    title?: string,
    buttonTitle?: string,
    script: string
}) => {

    const [form] = Form.useForm<{
        aiRobot: string;
        model: string;
        system: string;
    }>();

    const [loading, setLoading] = useState<boolean>(false);

    return (
        <Container style={props.style}>
            {
                props.title && (
                    <Header>
                        <TitleContainer>
                            <div>
                                <Title>{props.title}</Title>
                            </div>
                        </TitleContainer>
                    </Header>
                )
            }
            <Content>
                <MarkdownPreview
                    source={props.script}
                    style={{ padding: 16, width: '100%', flex: 1 }}
                    wrapperElement={{
                        "data-color-mode": "dark"
                    }}
                    rehypeRewrite={(node, index, parent) => {
                        // if (node.tagName === "a" && parent && /^h(1|2|3|4|5|6)/.test(parent.tagName)) {
                        //     parent.children = parent.children.slice(1)
                        // }
                    }}
                />
            </Content>
        </Container >
    );
};


export default MarkdownView;

const Container = styled.div`
    height: 100%;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
`;

const Header = styled.div`
    height: 40px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
`;

const Content = styled.div`
    width: 100%;
    flex: 1;
    display: flex;
    overflow: auto;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
`;

const TitleContainer = styled.div`
    height: 30px;
    width: 100%;
    display: flex;
    justify-content: space-between;
`;
const Title = styled.div`
    height: 30px;
    line-height: 30px;
    font-size:12px;
    font-weight: 600;
`;

const ButtonContainer = styled.div`
    width: 100%;
    padding: 8px 10px;
`;
const SettingsContainer = styled.div`
    width: 30px;
    height: 30px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
`;
